<template>
  <div class="my">
    <!--头部-->
    <div class="my-top">
      <div class="my-top-box">
        <div class="my-top-xinxi" @click="xinxi">
          <div class="tx">
            <router-link to="/information">
              <img :src="user.avatar" alt class="tp" />
            </router-link>
            <img src="https://wap.365msmk.com/img/皇冠-2 拷贝@2x.ca9087bc.png" alt class="hg" />
          </div>
          <div class="xm">
            <span class="mz">{{user.nickname}}</span>
            <span class="bj"></span>
          </div>
        </div>
        <div class="my-top-kc">
          <ul>
            <li v-for="(item,index) in mineList" :key="index" @click="mystatus(item)">
              <p class="shu">{{item.count}}</p>
              <p class="ke">{{item.name}}</p>
              <p class="gou">{{item.note}}</p>
            </li>
          </ul>
        </div>
        <div class="my-top-yk" @click="yue">
          <span>去约课</span>
        </div>
      </div>
    </div>

    <div class="cao">
      <!--中间导航-->
      <div class="my-dh">
        <img
          class="yq-tu"
          src=""
          alt
        />
        <div class="yq">
          <p class="yqa">邀请好友注册APP，享多重好礼</p>
          <p class="yqb">限时特惠，多邀多得</p>
        </div>
      </div>
      <!--ul li嵌套-->
      <ul class="zhu">
        <li class="zhu-fl">
          <p class="title">课程相关</p>
          <ul class="ci">
            <router-link to="/attention">
              <li class="tw">
                <img
                  src=""
                  alt
                />
                <p>关注的老师</p>
              </li>
            </router-link>
            <router-link to="/collection">
              <li class="tw">
                <img
                  src=""
                  alt
                />
                <p>我的收藏</p>
              </li>
            </router-link>
          </ul>
        </li>
        <li class="zhu-fl">
          <p class="title">订单相关</p>
          <ul class="ci">
            <li class="tw" @click="turnPage('Order',2)">
              <img
                src=""
                alt
              />
              <p>课程订单</p>
            </li>
            <li class="tw" @click="turnPage('Order',3)">
              <img
                src=""
                alt
              />
              <p>会员订单</p>
            </li>
            <li class="tw" @click="turnPage('Order',1)">
              <img
                src=""
                alt
              />
              <p>约课订单</p>
            </li>
          </ul>
        </li>
        <li class="zhu-fl">
          <p class="title">课程相关</p>
          <ul class="ci">
            <li class="tw">
              <img
                src=""
                alt
              />
              <p>优惠券</p>
            </li>
            <li class="tw">
              <img
                src=""
                alt
              />
              <p>学习卡</p>
            </li>
          </ul>
        </li>
        <li class="zhu-fl">
          <p class="title">自助服务</p>
          <ul class="ci">
            <li class="tw">
              <img
                src=""
                alt
              />
              <p>关注的老师</p>
            </li>
            <li class="tw">
              <img
                src=""
                alt
              />
              <p>我的收藏</p>
            </li>
          </ul>
          <ul class="ci">
            <li class="tw">
              <img
                src=""
                alt
              />
              <p>关注的老师</p>
            </li>
            <li class="tw" @click="shezhi">
              <img
                src=""
                alt
              />
              <p>设置</p>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { UserInfo, UserCenter } from "../request/http";
// import {mapState} from 'vuex';
export default {
  name: "My",
  data() {
    return {
      zjb_my_nickname: "",
      img1: "",
      user: {},
      user_id: "",
      mineList: [
        {
          count: 0,
          name: "我的特色课",
          note: "已购特色课程的学习",
          style: "my-study",
          url: "MyStudy"
        },
        {
          count: 0,
          name: "一对一辅导",
          note: "我的一对一老师辅导",
          style: "my-plan",
          url: "Record"
        },
        {
          count: 0,
          name: "剩余学习币",
          note: "查看剩余学习币",
          style: "my-period",
          url: "MyCurrency"
        }
      ]
    };
  },
  mounted() {
    this.getInfo();
  },
  created() {
    this.user_id = localStorage.user_id;
    this.turnPage();
    if (this.user_id) {
      this.getInfo();
    }
  },
  methods: {
    // ke(){//--->点击课程订单，跳转页面
    // 	this.$router.push('/ke');
    // },
    getInfo() {
      UserInfo().then(res => {
        console.log(res);
        this.user = res;
        this.requestCount();
      });
    },
    requestCount() {
      UserCenter().then(res => {
        // console.log(res);
        this.mineList[0].count = res.courses;
        this.mineList[1].count = res.oto;
        this.mineList[2].count = (res.integral / 100).toFixed(2);
      });
    },
    shezhi() {
      //-->点击设置
      this.$router.push("/login");
    },
    xinxi() {
      this.$router.push("/user");
    },
    //去约课
    yue() {
      this.$router.push({
        path: "/oto"
      });
    },
    turnPage(name, query) {
      if (!this.user_id) {
        // 未登录 统一推到验证码登录页面
        this.$router.push({
          name: "login"
        });
        return;
      }
      this.$router.push({
        path: name,
        query: {
          order_type: query
        }
      });
    },

    mystatus(item){
      console.log(item)

      if(item.style=="my-study"){
        this.$router.push("/mystudy")
      }else if(item.style=="my-plan"){
        this.$router.push("/record")
      }else if(item.style=="my-period"){
        this.$router.push("/myCurrency")
      }
    }
    // yuk(){
    // 	this.$router.push('/study')
    // }
  }
};
</script>

<style scoped>
.my {
  height: 100%;
  background: #fff;
  overflow: auto;
}
/*头部样式*/
.my-top {
  width: 100%;
  height: 200px;
  background: url(https://wap.365msmk.com/img/user_bg.ab306a5c.png) no-repeat
    top;
  background-size: 100%;
  background-color: #fff;
  position: relative;
}
.my-top-box {
  width: 92%;
  height: 170px;
  background-color: #fff;
  /*margin: 0 auto;*/
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  border-radius: 10px;
  box-shadow: 0px 0px 1px #909090;
}
.my-top-xinxi {
  height: 70px;
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: "Microsoft YaHei";
  font-size: 15px;
}
.tx {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #bdcdf1;
  position: relative;
  margin-right: 0.25rem;
}
.tx .tp {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 2px;
}
.tx .hg {
  height: 20px;
  width: 20px;
  position: absolute;
  right: -12px;
  top: 0;
}
.xm {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
}
.bj {
  width: 13px;
  height: 13px;
  margin-left: 10px;
  background: url()
    50% no-repeat;
  background-size: 13px;
}
.my-top-kc {
  width: 100%;
  display: flex;
  height: 200px;
}
.my-top-kc ul {
  list-style: none;
  width: 100%;
  margin-top: 10px;
}
.my-top-kc ul li {
  width: 33%;
  height: 50px;
  /*margin-top: 0.4rem;*/
  /*display: inline-block;*/
  line-height: 20px;
  float: left;
  margin: 2px 0 0 0;
  text-align: center;
}
.my-top-kc ul li .shu {
  font-size: 25px;
  color: #eb6100;
  font-weight: bold;
}
.my-top-kc ul li .ke {
  font-size: 13px;
  color: #595959;
  margin-top: 5px;
}
.my-top-kc ul li .gou {
  font-size: 12px;
  color: #b7b7b7;
  line-height: 10px;
  margin-top: 5px;
}
.my-top-yk {
  position: absolute;
  width: 60px;
  height: 25px;
  top: 20px;
  right: 0;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: #eb6100;
  text-align: center;
  line-height: 25px;
  color: #fff;
  font-size: 14px;
}
/*中间导航样式*/
.my-dh {
  width: 92%;
  margin: 30px auto;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(-90deg, #f2995a, #eb6100);
  align-items: center;
  display: flex;
}
.my-dh .yq-tu {
  width: 30px;
  height: 30px;
  margin: 0 10px 0 15px;
  display: block;
}
.my-dh .yq {
  display: block;
  font-family: "Microsoft YaHei";
}
.my-dh .yq .yqa {
  font-size: 14px;
  color: #fff;
  line-height: 20px;
}
.my-dh .yq .yqb {
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
.cao {
  background: #fff;
  margin-bottom: 60px;
}
.zhu {
  width: 92%;
  margin: 0 auto;
  list-style: none;
}
.zhu .zhu-fl {
  width: 100%;
  padding: 10px 0;
  display: block;
  overflow: hidden;
}
.zhu .zhu-fl .title {
  color: #333;
  font-size: 18px;
  line-height: 20px;
}
.zhu .zhu-f1 .ci {
  list-style: none;

  height: 20px;
}
.zhu .zhu-fl .ci .tw {
  width: 25%;
  height: 60px;
  align-items: center;
  text-align: center;
  justify-content: flex-end;
  flex-direction: column;
  display: flex;
  float: left;
}
.zhu .zhu-fl .ci .tw img {
  height: 20px;
  width: 20px;
}
.zhu .zhu-fl .ci .tw p {
  margin-top: 8px;
  color: #666;
  font-size: 13px;
}
</style>